import React, { useState } from "react";
import "./index.css";
import { Table, Space, Modal, Input, Form, Button, message } from "antd";
import axios from "axios";

interface DataInfo {
  dataList: any[];
  removeInfo: Function;
  editInfo: Function;
}
const { TextArea } = Input;
const layout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 3, span: 16 },
};
const validateMessages = {
  // eslint-disable-next-line no-template-curly-in-string
  required: "${label} 是必填的！",
};
const TableInfo: React.FC<DataInfo> = ({ dataList, removeInfo, editInfo }) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [uid, setUid] = useState(0);

  const [form] = Form.useForm();

  const columns = [
    {
      title: "内容",
      dataIndex: "content",
      key: "content",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "时间",
      dataIndex: "time",
      key: "time",
    },
    {
      title: "操作",
      key: "action",
      render: (record: any) => (
        <Space size="middle">
          <Button onClick={(e) => remove(record.id)} type="primary" danger>
            删除
          </Button>
          <Button onClick={(e) => edit(record)} type="primary">
            修改
          </Button>
        </Space>
      ),
    },
  ];

  const remove = async (item: number) => {
    const { data: res } = await axios.get(
      "http://139.196.93.237:3000/api/DeleteOpinions",
      {
        params: { id: item },
      }
    );
    if (res.status === 200) {
      let index = dataList.filter((todo) => todo.id !== item);
      removeInfo(index);
      message.success("删除成功！");
    }
  };
  const edit = (item: any) => {
    setUid(item.id);
    setIsModalVisible(true);
    form.setFieldsValue(item);
  };
  const onFinish = (values: any) => {
    let newArr: any[] = dataList.map((o) => {
      values.id = uid;
      values.time = new Date().toString();
      if (o.id === uid) {
        o = values;
      }
      return o;
    });
    editInfo(newArr);
    message.success("修改成功！");
    setIsModalVisible(false);
  };
  const onReset = () => {
    form.resetFields();
  };

  return (
    <div className="table_info">
      <Table
        dataSource={dataList}
        columns={columns}
        rowKey={(columns) => columns.id}
      />
      <Modal
        title="新增数据"
        onCancel={() => {
          setIsModalVisible(false);
        }}
        footer={null}
        visible={isModalVisible}
      >
        <Form
          {...layout}
          form={form}
          name="control-hooks"
          validateMessages={validateMessages}
          onFinish={onFinish}
        >
          <Form.Item name="title" label="标题" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              { required: true },
              {
                pattern:
                  /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                message: "邮箱格式不正确",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="content" label="内容" rules={[{ required: true }]}>
            <TextArea rows={4} />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default TableInfo;
